<#assign pageTitle = "${course.courseName}-${siteCompany.siteName!}" />
<#assign pageHeader>
	<script type="text/javascript" src="/static/libs/jquery/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="/static/js/parabola.js"></script>
</#assign>
<#assign pageContent>
	<div id="aCoursesList" class="bg-f8 of">
		<!-- /课程详情 开始 -->
		<section class="container">
			<section class="path-wrap txtOf hLh30">
				<a href="" title="" class="c-999 fsize14">首页</a>
				\
				<a href="/course/list.html" title="" class="c-999 fsize14">课程列表</a>
				\ <span class="c-333 fsize14">${course.courseName}</span>
			</section>
			<div class="cours-big-box">
				<article class="c-v-pic-wrap">
					<section class="p-h-video-box" id="videoPlay">
						<#if course.cover?? >
							<img src="${staticSite}${course.cover}" alt="${course.courseName}" class="dis c-v-pic" />
						<#else>
							<img src="/static/qdxwx/img/coures.gif" alt="${course.courseName}" class="dis c-v-pic" />
						</#if>
					</section>
					<section class="p-h-video-tip">
						<img src="/static/qdxwx/img/loading.gif">
						<p class="hLh20"><span class="c-999">加载中...</span></p>
					</section>
				</article>
				<aside class="c-attr-wrap">
					<section class="c-attr-wrap-infor">
						<h2 class="hLh30 txtOf">
							<span class="c-333 fsize24">${course.courseName}</span>
						</h2>
						<section class="hLh30 mt15 of c-th-box">
							<ol class="thr-attr-ol clearfix">
								<li>
									<aside>
										<em class="icon16 gms-ico">&nbsp;</em>
										<tt class="c-666 f-fM fsize14 mr5 vam">购买数</tt>
										<tt class="c-333 f-fM fsize14 vam">${course.buyCount }</tt>
									</aside>
								</li>
								<li>
									<aside>
										<em class="icon16 kss-ico">&nbsp;</em>
										<tt class="c-666 f-fM fsize14 mr5 vam">课时数</tt>
										<tt class="c-333 f-fM fsize14 vam">${course.lessonNum }</tt>
									</aside>
								</li>
								<li>
									<aside>
										<em class="icon16 lls-ico">&nbsp;</em>
										<tt class="c-666 f-fM fsize14 mr5 vam">浏览数</tt>
										<tt class="c-333 f-fM fsize14 vam">${course.viewCount}</tt>
									</aside>
								</li>
							</ol>
						</section>
						<section class="c-attr-mt hLh30 of mt10">
							<tt class="c-999 fsize14 f-fM vam">主讲：</tt>
							<#list teacherList  as tea>
								<tt class="c-999 fsize14 f-fM vam">
									${tea.name}
								</tt>
							</#list>
						</section>
						<section class="c-attr-mt mt10">
							<tt class="c-999 fsize14 f-fM vam">套餐课有效期：</tt>
							<tt class="c-999 fsize14 f-fM vam">
								<#if course.expireDate??>
									${(course.expireDate?date("yyyy-MM-dd"))!''}
								</#if>
							</tt>
						</section>
						<section class="c-attr-jg mt15">
							<span class="c-666">价格：</span><big class="c-red">￥${course.price/100}</big> <span class="c-ccc ml10">原价：<s>￥${course.sourcePrice/100}</s></span>
						</section>
						<section class="c-attr-mt of mt15">
							<#if isFavorite?string =="true">
								<a title="取消收藏" href="javascript:void(0)" class="vam fl cou-add-fav sc-end f-fM" onclick="deleteFavorite(${course.courseId},this)"><em class="icon18 scIcon mr5">&nbsp;</em><tt class="c-master fsize14 vam f-fM">取消收藏</tt></a>
							<#else>
								<a title="收藏" href="javascript:void(0)" class="vam fl cou-add-fav f-fM" onclick="favorites(${course.courseId},this)"><em class="icon18 mr5 scIcon">&nbsp;</em><tt class="c-666 fsize14 vam f-fM">收藏</tt></a>
							</#if>
						</section>
						<section class="c-attr-mt new-cours-btnbox mt30">
							<#if isBuy?string=="false" && (course.price>0)>
								<a href="javascript:void(0)" id="cou-shopcar" title="购买" class="comm-btn c-btn-3 cou-buy-btn" onclick="buyNow('${course.courseId}')">购买套餐课</a>
								<section class="ml15 c-shop-car-wrap disIb">
									<a class=" c-fff f-fM btnCart" id="cou-shopcar" href="javascript:void(0)" onclick="addShoppingCart('${course.courseId}')">加入购物车</a>
									<div class="fly_item" id="flyItem">
										<img width="50" height="50" src="/static/qdxwx/img/avatar-boy.gif">
									</div>
								</section>
							<#else>
								<#if firstCourseId==0>
									<a href="javascript:void(0)" id="cou-shopcar" title="暂无课程" class="comm-btn c-btn-3 cou-nocou-btn">暂无课程</a>
								<#else>
									<a href="javascript:void(0)" id="cou-shopcar" title="立即观看" onclick="isLogin(function(){ location.href='/user/course/play.html?courseId=${firstCourseId}'});" class="comm-btn c-btn-3 cou-buy-btn">立即观看</a>
								</#if>
							</#if>
						</section>
					</section>
				</aside>
				<div class="clear"></div>
				<div class="coures-jbicon c-jb-xq">
					<img src="/static/qdxwx/img/c-tc-jb-big.png">
				</div>
			</div>
			<!-- /课程封面介绍 -->
			<div class="mt20 c-infor-box">
				<article class="fl w70">
					<section class="mr30">
						<div class="i-box cou-in-boc ">
							<div class="clearfix c-infor-tabTitle c-tab-title">
								<section id="c-i-tabTitle" class="fl">
									<a  class="current" onclick="selectCourseInfo('courseContext')" title="套餐课详情" href="javascript: void(0)">套餐课详情</a>
									<a  title="套餐课列表" onclick="selectCourseInfo('courseList')" href="javascript: void(0)">套餐课列表</a>
									<a  title="套餐课评论" onclick="selectCourseInfo('courseComment')" href="javascript: void(0)">套餐课评论</a>
								</section>
							</div>
							<article class="ml10 mr10 new-c-i-b-warp">
								<div id="courseContext">
									<h6 class="c-i-content c-infor-title">
										<span>简介</span>
									</h6>
									<!-- /无数据提示 开始-->
									<#if course.context??>
										<div class="course-txt-body-wrap">
											<section class="course-txt-body">
												<p>${course.context}</p>
											</section>
										</div>
									<#else>
										<section class="no-data-wrap">
											<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
										</section>
									</#if>
									<!-- /无数据提示 结束-->
								</div>
								<!-- /课程介绍 -->
								<div class="" style="display: none" id="courseList">
									<section class="">
										<div class="lh-menu-wrap" >
											<section class="c-pk-list-bx">
												<ul class="c-c-l">
													<#if !courseDTOList??>
													<#else>
														<!-- /无数据提示 开始-->
														<section class="no-data-wrap">
															<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
														</section>
														<!-- /无数据提示 结束-->
													</#if>
													<#list courseDTOList as course>
														<li>
															<section class="c-c-img">
																<a target="_blank" href="/course/view/${course.courseId}.html">
																	<#if course.cover??>
																		<img width="154" height="116" xSrc="${staticSite}${course.cover}" alt="">
																	<#else>
																		<img width="154" height="116" xSrc="/static/qdxwx/img/coures.gif" src="/static/qdxwx/img/coures.gif" alt="">
																	</#if>
																</a>
															</section>
															<h4 class="hLh20 txtOf unFw">
																<a href="/course/view/${course.courseId}.html" target="_blank" title="${course.courseName}" class="c-333 fsize18 f-fM">${course.courseName}</a>
															</h4>
															<div class="s-c-desc">
																<p class="c-999 f-fM fsize12">${course.intro!}</p>
															</div>
															<div class="pac-cou-js">
																<span class="vam">
																	<tt class="vam fsize12 c-666 f-fM">课时：</tt>
																	<tt class="vam fsize12 c-666 f-fM">${course.lessonNum}节</tt>
																</span>
																<span class="vam ml30">
																	<tt class="vam fsize12 c-666 f-fM">单价：</tt>
																	<tt class="vam fsize16 c-master f-fM">￥${course.price/100}</tt>
																</span>
															</div>
															<section class="c-pk-st tar">
																<#if isBuy?string=="true" || (course.price<0) >
																	<a class="goSt" title="查看详情" href="/course/view/${course.courseId}.html">查看详情</a>
																</#if>
															</section>
														</li>
													</#list>
												</ul>
											</section>
										</div>
									</section>
								</div>
								<!-- /课程大纲 -->
								<div id="courseComment" style="display: none">
									<div id="comment-form" class="lh-bj-list pr">
										<ul>
											<li class="unBr">
												<#if user??>
													<aside class="noter-pic">
														<#if user.avatar??>
															<img width="50" height="50" class="avatar" src="${staticSite}${user.avatar }">
														<#else>
															<img width="50" height="50" class="avatar" src="/static/qdxwx/img/avatar-boy.gif">
														</#if>
													</aside>
													<div class="of">
														<section class="n-reply-wrap">
															<div class="numb-box">
																<fieldset>
																	<textarea name="commentContent" placeholder="输入您要评论的文字" id="commentContent"></textarea>
																</fieldset>
															</div>
															<p class="of mt5 tar pl10 pr10">
																<a href="javascript:addComment();" title="发表评论" class="lh-reply-btn">发表评论</a>
															</p>
														</section>
													</div>
												<#else>
													<a href="/auth/login.html" class="lh-reply-btn">点此登录后发表评论</a>
												</#if>
											</li>
										</ul>
									</div>

									<div id="comment-list"></div>
									<!-- 公共分页 开始 -->
									<div id="comment-page"></div>
									<!-- 公共分页 结束 -->
								</div>
								<!-- /课程评论 -->
							</article>
						</div>
					</section>
				</article>
				<aside class="fl col-3">
					<div class="i-box">
						<div>
							<section class="c-infor-tabTitle c-tab-title">
								<span>主讲讲师</span>
							</section>
							<section class="stud-act-list">
								<#list teacherList as tea>
									<ul style="height: auto;">
										<li>
											<div class="u-face">
												<a href="/teacher/view/${tea.id}.html">
													<#if tea.avatar??>
														<img src="${staticSite}${tea.avatar }" width="50" height="50" alt="">
													<#else>
														<img src="/static/qdxwx/img/avatar-boy.gif" width="50" height="50" alt="">
													</#if>
												</a>
											</div>
											<section class="hLh30 txtOf">
												<a class="c-333 fsize16 fl" href="/teacher/view/${tea.id}.html">${tea.name }</a>
											</section>
											<section class="hLh20 txtOf">
												<span class="c-999">${tea.education }</span>
											</section>
										</li>
									</ul>
								</#list>
							</section>
						</div>
					</div>
					<div class="i-box mt25">
						<div>
							<section class="c-infor-tabTitle c-tab-title">
								<span title="" href="javascript:void(0)">推荐课程</span>
							</section>

							<#if courseList??>
								<section class="comm-course-list of cou-in-r-list bg-fff">
									<ol>
										<#list courseList as item>
											<li>
												<div class="cc-l-wrap">
													<section class="course-img">
														<a href="/course/view/${item.courseId}.html">
															<img class="img-responsive" xsrc="${staticSite}${item.cover}" src="${staticSite}${item.cover}" alt="">
														</a>
													</section>
													<div class="coure-bg-g">
														<h3 class="hLh30 txtOf mt5">
															<a class="course-title fsize16 c-333" href="/course/view/${item.courseId}.html" title="${item.title}">${item.title}</a>
														</h3>
														<section class="mt10 hLh20 of">
															<span class="fr">
															<tt class="c-master fsize14 f-fM">￥${item.price/100}</tt>
															</span>
															<span class="fl jgAttr c-ccc f-fA">
															<tt class="c-999 f-fA mr10">${item.buyCount}人购买</tt>
															<tt class="c-999 f-fA span-2">${item.viewCount}浏览</tt>
															</span>
														</section>
													</div>
												</div>
											</li>
										</#list>

									</ol>
								</section>
							<#else>
								<section class="no-data-wrap">
									<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在整理中...</span>
								</section>
							</#if>
						</div>
					</div>
				</aside>
				<div class="clear"></div>
			</div>
		</section>
		<!-- /课程详情 结束 -->
	</div>
	<script type="text/html" id="comment-template">
		{{#  if(d.length > 0){ }}
		<section class="question-list lh-bj-list pr">
			<ul class="pr10">
				{{#  layui.each(d, function(index, item){ }}
				<li>
					<aside class="noter-pic">
						<img width="50" height="50" class="avatar" src="{{ item.avatar || '/static/qdxwx/img/avatar-boy.gif' }}">
					</aside>
					<div class="of">
							<span class="fl">
								<font class="fsize12 c-blue">
									{{item.userName}}
								</font>
								<font class="fsize12 c-999 ml5">评论：</font>
							</span>
						<span class="fr">
								{{ layui.util.toDateString(item.addTime, 'yyyy-MM-dd HH:mm:ss') }}
							</span>
					</div>
					<div class="noter-txt mt5">
						<p>{{ item.content }}</p>
					</div>
				</li>
				{{#  }); }}
			</ul>
		</section>
		{{#  } }}
		{{#  if(d.length === 0){ }}
		<section class="no-data-wrap">
			<em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">还没有评论，快来抢沙发吧...</span>
		</section>
		{{#  } }}
	</script>
</#assign>
<#assign pageFooter>
	<script type="text/javascript" src="/static/js/course/course-view.js?${vstamp!}"></script>
	<script type="text/javascript" src="/static/js/comment/comment.js?${vstamp!}"></script>
	<script type="text/javascript">
		var params = {
			templateId: '#comment-template'
			, viewId: '#comment-list'
			, pageViewId: '#comment-page'
			, otherId: ${course.courseId}
			, type: 2
			, page: 1
		}

		$(function () {
			//课程详情收起展开
			ctbodyFun();

			scrollLoad(); //响应滚动加载课程图片

			commentListInit(params);
		});

		/*购买套餐课程*/
		function buyPackage() {
			var courseId = [];
			var price = [];
			var endTime = [];
			/*判断套餐是否都为免费课程*/
			if ('${count!}' == 0) {
				return layer.msg("套餐课程都为免费课程！");
			}
			$(".courseId").each(function () {
				courseId.push($(this).val())
			});
			$(".endTime").each(function () {
				endTime.push($(this).val())
			});
			$(".price").each(function () {
				price.push($(this).val());
			});
			/*判断套餐课程是否都为过期课程*/
			var ifTime = false;
			for (var k = 0; k < endTime.length; k++) {
				var date = endTime[k].split("-");

				if (new Date(date[0], parseInt(date[1]) - 1, date[2]) > new Date().getDate()) {
					ifTime = true;
				}
			}
			/*把课程放入购物车*/
			for (var i = 0; i < courseId.length; i++) {
				var date = endTime[i].split("-");
				if (price[i] != 0 && new Date(date[0], parseInt(date[1]) - 1, date[2]) > new Date().getDate()) {
					$.ajax({//验证课程金额
						url: "/cart/ajax/add.json",
						data: {
							"goodsId": courseId[i],
							"type": "1"
						},
						type: "post",
						dataType: "json",
						success: function (result) {
							if (result.code === 401) {
								window.location.href = "/auth/login.html";
							} else if (result.code !== 0) {
								layer.alert(result.msg);
							}
						}
					})
				}
			}
			var time = setInterval(function () {
				clearInterval(time);
				if (ifTime == false) {
					layer.msg("套餐课所有课程已过期！");
				} else {
					/*跳转到结账页面*/
					window.location.href = "/cart/index.html?command=shopCart";
				}
			}, 100)
		}
	</script>
</#assign>
<#include "../layouts/layout.ftl">